<template>
	<view class="classify">
		<u-sticky>
			<js-search-bar class="search" navTo="search/search" @search="search"></js-search-bar>
		</u-sticky>
		<u-sticky offset-top="48">
			<scroll-view scroll-y="true" class="scroll-y001">
				<u-transition mode="fade-down" :show="!!aside.length">
					<view class="lbox">
						<view class="item" :class="{ active: nowVal.id == item.id }" @click="handleItem(item)" v-for="(item, i) in aside" :key="i">
							<text>{{ item.title }}</text>
						</view>
					</view>
				</u-transition>
			</scroll-view>
		</u-sticky>

		<view class="rbox">
			<view class="card">
				<goodList :list="list" listStyle="4"></goodList>
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';
import { updata_car_count } from '@/common/common_fun.js';
export default {
	name: 'classify',
	data() {
		return {
			aside: [],
			nowVal: {},
			list: [],
			status: '',
			keyword: '',
			paging: {
				page: 1,
				pagenum: 90
			}
		};
	},
	onLoad() {
		this.reset();
		this.init();
	},
	onShow() {
		updata_car_count();
	},
	onReachBottom() {
		if (this.status === 'nomore') return;
		this.getList();
	},
	methods: {
		search(e) {
			this.keyword = e;
			this.getList();
		},
		handleItem(item) {
			this.reset();
			this.nowVal = item;
			this.getList();
		},
		init() {
			API.getJson('product_channel', {}).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.nowVal = data[0];
					this.aside = data;
					this.getList();
				}
			});
		},
		reset() {
			this.paging.page = 1;
			this.list = [];
		},
		getList() {
			this.status = 'loading';
			API.getJson('product_plist', { channel_id: this.nowVal.id, ...this.paging, keyword: this.keyword }).then((res) => {
				this.status = '';
				const { code, data, message } = res;
				if (code === 1) {
					if (data.length !== 0) this.list = this.list.concat(data);
					if (this.paging.pagenum === data.length) {
						this.paging.page += 1;
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.classify {
	.scroll-y001 {
		float: left;
		width: 232rpx;
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 98rpx);
	}
	.lbox {
		width: 232rpx;
		padding: 24rpx 32rpx;
		display: flex;
		flex-direction: column;
		.item + .item {
			margin-top: 32rpx;
		}
		.item {
			.flex-center();
			width: 168rpx;
			height: 64rpx;
			background: #ffffff;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #141414;
			}
		}
		.active {
			background: @basecolor;
			text {
				color: #ffffff !important;
			}
		}
	}
	.rbox {
		width: 490rpx;
		padding: 24rpx 0;
		margin-left: 232rpx;
		.card {
			width: 490rpx;
			min-height: 60vh;
			padding-bottom: 50rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	}
}
</style>
